<template>
  <div class="growth-value-detail-main">
    <Dialog :appDialog="appDialog">
      <div>
        <ZwSearchForm :option="searchOption" @search="search" @reset="reset" />
        <ZwTable 
          ref="tableRef" 
          class="table-box" 
          :option="tableOption" 
          :rowKey="getRowKey" 
          :paramProp="state.paramProp"
          :fetch-params="state.searchParams" 
          :fetch-api="fetchApi()">
        </ZwTable>
      </div>
    </Dialog>
  </div>
</template>
<script setup lang="tsx">
import { ref, reactive, computed } from 'vue'
import { deepCopy } from '@/utils/helper'
import { ElMessage, ElButton } from 'element-plus';
import { getGrowthList, getMemberChannelList } from '@/api/member/memberList/index'
import Dialog from '@/components/Dialog.vue'
import ZwSearchForm from '@/components/zw/search-form/SearchForm'
import ZwTable from '@/components/zw/table/Table'

const tableRef = ref<any>(null)


const submitHandel = () => {
  appDialog.visible = false
}

const appDialog = reactive<any>({
  visible: false,
  title: '成长值明细',
  width: '60%',
  submit: submitHandel,
  submitText: '关闭'
})

const searchOption = computed(() => {
  return [
    {
      label: '',
      name: 'change_type',
      type: 'select',
      clearable: true,
      placeholder: '请选择原因',
      optionList: [
        { value: 0, label: '全部' },
        { value: 1, label: '购买商品' },
        { value: 2, label: '商品退款' },
        { value: 3, label: '浏览商品' },
        { value: 4, label: '分享商品' }
      ]
    },
    {
      label: '',
      name: 'channel_id',
      type: 'select',
      clearable: true,
      placeholder: '请选择来源渠道',
      fetchOptionApi: () => {
        return new Promise((resolve) => {
          getMemberChannelList().then((res: any) => {
            let list: any = [];
            list = res || []
            resolve(list);
          });
        });
      },
      formatOption: (v: any) => ({
        label: v.name,
        value: v.id
      })
    },
    {
      label: '',
      name: 'shop_name',
      type: 'input',
      clearable: true,
      placeholder: '请输入来源店铺',
    },
    {
      label: '',
      name: 'created_at',
      value: [],
      type: 'datePicker',
      datePickerType: 'daterange',
      datePickerFormat: 'YYYY-MM-DD HH:mm:ss',
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
      startPlaceholder: '开始日期',
      endPlaceholder: '结束日期'
    },
    
  ]
})

const tableOption = [
  {
    prop: 'change_val',
    label: '变动值',
    render({ row, column, index }: any) {
      return (
        <div>+ { row.change_val }</div>
      )
    }
  },
  {
    prop: 'change_type_name',
    label: '原因',
  },
  {
    prop: 'channel_name',
    label: '来源渠道',
  },
  {
    prop: 'shop_name',
    label: '来源店铺',
    render({ row, column, index }: any) {
      return (
        <div>{ row.shop_name ? row.shop_name : '--' }</div>
      )
    }
  },
  {
    prop: 'remark',
    label: '备注',
    render({ row, column, index }: any) {
      return (
        <div>{ row.remark ? row.remark : '--' }</div>
      )
    }
  },
  {
    prop: 'updated_at',
    label: '变动时间',
  },
]

const defaultParams = {
  member_no: '', 
  change_type: '', 
  channel_id: '',
  shop_id: '',
  created_at: [],
  
}

const state = reactive({
  searchParams: deepCopy(defaultParams),
  paramProp: { page: 'page', pageSize: 'page_size' }
})

const getRowKey = (row: any) => {
  return row.id
}

const search = (data: any) => {
  let member_no = state.searchParams.member_no
  tableRef.value.getTable().clearSelection()
  state.searchParams = deepCopy({ ...defaultParams, ...data, member_no })
}

const reset = () => {
  let member_no = state.searchParams.member_no
  tableRef.value.getTable().clearSelection()
  state.searchParams = deepCopy({ ...defaultParams, member_no })
}

const fetchApi = () => {
  return getGrowthList
}

defineExpose({
  appDialog,
  state
})
</script>
<style lang="scss" scoped>
.growth-value-detail-main {

}

</style>